<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>猎舞网</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
	<link rel="stylesheet" href="__PUBLIC__static/lib/weui.min.css">
	<link rel="stylesheet" href="__PUBLIC__static/css/jquery-weui.css">
	<link rel="stylesheet" href="__PUBLIC__static/css/style.css">
	<!--<link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css">-->
	<style type="text/css">
		/*点击添加图片按钮div包裹*/

		.addbtn_wrap {
			position: relative;
		}

		/*添加图片按钮*/

		.addbtn {
			position: absolute;
		}

		input[type=file] {
			width: 100px;
			position: absolute;
			top: 5px;
			opacity: 0;
		}



		/*所有图片div包裹*/

		.img_wrap {
			width: 600px;
			margin-top: 40px;
			float: left;
		}

		.pic_wrap {
			width: 100px;
			height: 70px;
			float: left;
			position: relative;
			margin: 5px;
		}

		.img {
			width: 100px;
			height: 70px;
			float: left;
		}

		.delete {
			width: 50%;
			height: 60px;
			position: absolute;
			display: none;
			border-radius: 6px;
		}

		.delete img {
			float: right;
		}

		.wy-header-title {
			position: relative;
			width: 100%;
			height: 56px;
			background-color: black;
			margin-left: -2px;
		}

		.backw {
			position: absolute;
			width: 30px;
			top: 25%;
			left: 9px;
		}

		.wy-header-title span {
			font-family: FZLTZHK;
			font-size: 22px;
			color: #FFFFFF;
			line-height: 56px;
		}

		.inputbox {
			position: relative;
			width: 95%;
			height: 40px;
			border-bottom: 1px solid #CCCCCC;
			margin-left: 5%;
			margin-top: 5%;
			font-size: 16px;
		}

		.inputbox img {
			width: 24px;
			margin-right: 10px;
		}

		.checkbox {
			position: relative;
			width: 95%;
			height: 40px;
			border-bottom: 1px solid #CCCCCC;
			margin-left: 5%;
			margin-top: 5%;
			font-size: 16px;
		}

		.checkbox img {
			width: 24px;
			margin-right: 10px;
		}

		.checkbox select {
			width: 85px;
			float: right;
			margin-right: 5%;
			font-family: simhei[Regular];
			border: none;
			color: #333333;
			font-size: 17px;
			-webkit-appearance: none;
			/*去除chrome浏览器的默认下拉图片*/
			-moz-appearance: none;
			/*去除Firefox浏览器的默认下拉图片*/
			background-image: url(__PUBLIC__static/images/icon-more.png);
			background-repeat: no-repeat;
			background-position: right;
		}

		.secbox {
			position: relative;
			margin-top: 100px;
		}

		.thinkjobbox {
			position: relative;
			margin-top: 40px;
		}

		.box,
		.box1 {
			position: relative;
			width: 95%;
			margin-left: 5%;
			margin-top: 5%;
			font-size: 16px;
		}

		.box img,
		.qianbi {
			width: 24px;
			margin-right: 10px;
		}

		textarea {
			position: absolute;
			width: 95%;
			top: 40px;
			height: 120px;
			background-color: #F7F7FA;
		}

		.huojiang {
			position: relative;
			margin-top: 200px;
		}

		.photo {
			position: relative;
			margin-top: 180px;
		}

		.submit {
			height: 50px;
			width: 90%;
			margin-left: 5%;
			margin-top: 200px;
			margin-bottom: 100px;
			background-image: url(__PUBLIC__static/images/tijiao.png);
			background-repeat: no-repeat;
			background-size: 105%;
			background-position: 0px 0px;
		}
	</style>
</head>

<body ontouchstart style="background-color: white">
	<!--顶部搜索-->
	<div class="wy-header-title">
		<img class="backw" src="__PUBLIC__static/images/backwhite.png" alt="" />
		<span>简历</span>
	</div>
	<!--//主体-->
	<div id="body">

		<form method="post" enctype="multipart/form-data" action="doupdate">
			<div class="inputbox">
				<img src="__PUBLIC__static/images/qianbi.png" />
				<label>手机</label>
				<input id="mobile" type="text" name="mobile" value="{$res.tel}" />
			</div>
			<div class="inputbox">
				<img src="__PUBLIC__static/images/qianbi.png" />
				<label>姓名</label>
				<input id="name" name="name" type="text" value="{$res.name}" />
			</div>
			<div class="secbox">
				<div class="checkbox">
					<img src="__PUBLIC__static/images/qianbi.png" />
					<label>性别</label>
					<select id="sex" name="sex" value="{$res.sex}">
						<option id="s1">男</option>
						<option id="s2">女</option>
					</select>
				</div>
				<div class="checkbox" name="address">
					<img src="__PUBLIC__static/images/qianbi.png" />
					<label>省市</label>
					<select id="city" name="city">
						<option class="city0">选择市</option>
						<option class="city1">杭州市</option>
						<option class="city2">嘉兴市</option>
						<option class="city3">湖州市</option>
						<option class="city4">绍兴市</option>
						<option class="city5">宁波市</option>
						<option class="city6">台州市</option>
						<option class="city7">温州市</option>
						<option class="city8">衢州市</option>
						<option class="city9">金华市</option>
						<option class="city10">丽水市</option>
						<option class="city11">舟山市</option>
					</select>
				</div>
				<div class="checkbox">
					<img src="__PUBLIC__static/images/qianbi.png" />
					<label>类型</label>
					<select id="type" name="type">
						<option id="t1">全职</option>
						<option id="t2">兼职</option>
					</select>
				</div>
			</div>
			<div class="thinkjobbox">
				<div class="box">
					<img src="__PUBLIC__static/images/qianbi.png" />
					<label>求职意向</label>
					<div><textarea id="thinkjobbox " name="think_job">{$res.think_job}</textarea></div>
				</div>
			</div>
			<div class="huojiang">
				<div class="box">
					<img src="__PUBLIC__static/images/qianbi.png" />
					<label>获奖情况(可选填)</label>
					<div><textarea id="huojiang" name="huojiang">{$res.huojiang}</textarea></div>
				</div>
			</div>
			<div class="photo">
				<div class="box1">
					<img src="__PUBLIC__static/images/qianbi.png" class="qianbi" />
					<label>照片(可选填,最多三张)</label>
					<div class="a-uplo">
						<div class="addbtn_wrap">
							<div class="addbtn_wrap">
								<input type="button" class="btn btn-primary addbtn" value="点击添加图片">
								<input type="file" name="image[]" id="file1" style="z-index: 1" onchange="getPhoto(this)">
							</div>
							<!--图片包裹-->
							<div class="img_wrap">

							</div>
							<!--<img style="width: 100%;" src="__PUBLIC__static/images/picture.png" />-->
						</div>
					</div>
				</div>
			</div>
			<input value="" type="submit" class="submit" />
		</form>
	</div>

	<!--底部导航-->
	<div class="foot-black"></div>
	<div class="weui-tabbar wy-foot-menu">
		<a href="../Content/index" class="weui-tabbar__item " style="height: 48px">
			<img style="width: 50px;" src="__PUBLIC__static/images/recruit.png" />

		</a>
		<a href="../Resume/index" class="weui-tabbar__item weui-bar__item--on " style="height: 48px">
			<img style="width: 24px;" src="__PUBLIC__static/images/resume.png" />

		</a>
		<a href="../Users/index" class="weui-tabbar__item" style="height: 48px">
			<img style="width: 26px;" src="__PUBLIC__static/images/me.png" />
		</a>
	</div>
	<script src="__PUBLIC__static/lib/jquery-2.1.4.js"></script>
	<script src="__PUBLIC__static/lib/fastclick.js"></script>
	<script src="__PUBLIC__static/js/jquery-weui.js"></script>
	<script src="__PUBLIC__static/js/swiper.js"></script>
	<script src="__PUBLIC__static/js/area.js"></script>
	<script src="__PUBLIC__static/js/select.js"></script>
	<script type="text/javascript">
	// 弹出所悟信息
		$check = null
		$check = "{$cha}"
		if ($check !== "") {
			alert($check);
		};
		// 给下拉默认值（性别）
		$sex=null;
		$sex="{$res.sex}"
		if ($sex == "男") {
			$("#sex  option[id='s1'] ").attr("selected",true);
		};
	     if($sex == "女"){
			$("#sex  option[id='s2'] ").attr("selected",true);			
		};
		// 给下拉默认值（类型）
		$type=null;
		$type="{$res.type}"
		if ($type== "全职") {
			$("#type  option[id='t1'] ").attr("selected",true);
		};
	     if($type == "兼职"){
			$("#type  option[id='t2'] ").attr("selected",true);			
		};
		// 给下拉默认值（城市）
		$city=null;
		$city="{$res.address}"
		if ($city== "杭州市") {
			$("#city  option[class='city1'] ").attr("selected",true);
		};
	     if($city == "嘉兴市"){
			$("#city  option[class='city2'] ").attr("selected",true);			
		};
		if($city == "湖州市"){
			$("#city  option[class='city3'] ").attr("selected",true);			
		};
		if($city == "绍兴市"){
			$("#city  option[class='city4'] ").attr("selected",true);			
		};
		if($city == "宁波市"){
			$("#city  option[class='city5'] ").attr("selected",true);			
		};
		if($city == "台州市"){
			$("#city  option[class='city6'] ").attr("selected",true);			
		};
		if($city == "温州市"){
			$("#city  option[class='city7'] ").attr("selected",true);			
		};
		if($city == "衢州市"){
			$("#city  option[class='city8'] ").attr("selected",true);			
		};
		if($city == "金华市"){
			$("#city  option[class='city9'] ").attr("selected",true);			
		};
		if($city == "丽水市"){
			$("#city  option[class='city10'] ").attr("selected",true);			
		};
		if($city == "舟山市"){
			$("#city  option[class='city11'] ").attr("selected",true);			
		};
		/*预览*/
		var count = 1;
		function getPhoto(node) {
			var imgURL = "";
			try {
				var file = null;
				if (node.files && node.files[0]) {
					file = node.files[0];
				} else if (node.files && node.files.item(0)) {
					file = node.files.item(0);
				}

				try {
					imgURL = file.getAsDataURL();
				} catch (e) {
					imgRUL = window.URL.createObjectURL(file);
				}
			} catch (e) {
				if (node.files && node.files[0]) {
					var reader = new FileReader();
					reader.onload = function (e) {
						imgURL = e.target.result;
					};
					reader.readAsDataURL(node.files[0]);
				}
			}

			/*动态添加file和对应的图片预览*/
			createPic();
			createFile();

			count++;
			return imgURL;
		}

		/*创建图片预览元素*/
		function createPic() {
			var picText = '<div class="pic_wrap" id=" showPic' + count + '" onmouseover="overDelete(this)" onmouseleave="leaveDelete(this)">' +
				'<img  src="' + imgRUL + '"" class="img img-rounded">' +
				'<div class="delete"><img src="/public/html/images/x_alt.png" onclick="deletePic(this)"></div>' +
				'</div>';

			/*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，不插入预览图*/

			for (var i = 0; i < $('input[type=file]').length - 1; i++) {
				var val = $('input[type=file]').eq(i).val();



			}
			if ($('input[type=file]').length > 5) {
				console.log($('input[type=file]'));
				/*此处不插入图片，就让count回到之前那一步，否则id=file和id=showPic的数据后缀对不上，导致file和图片对应错乱*/
				count = count - 1;
				return;
			}
			$('.img_wrap').append(picText);

		}



		/*创建新的file元素*/
		function createFile() {

			var flieText = '<input type="file" name="image[]" id="file' + (count + 1) + '" style="z-index: ' + (count + 1) + '" onchange="getPhoto(this)">';

			/*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，提示图片已存在，清空最后一个file*/
			if ($('input[type=file]').length > 5) {
				var file = $('input[type=file]').last();
				file.after(file.clone().val(""));
				file.remove();
				alert("图片最多上传三张哦！");
				return;
			}


			$('.addbtn_wrap').append(flieText);



		}



		/*移入移出，删除遮罩层显示隐藏*/
		function overDelete(obj) {
			$(obj).children('div').show();
		}

		function leaveDelete(obj) {
			$(obj).children('div').hide();
		}



		/*删除图片和对应的file*/
		function deletePic(obj) {

			/*提取图片的id的数字部分*/
			var picId = $(obj).parent().parent().attr('id');

			var picVal = picId.replace(/[^0-9]/ig, "");

			var fileArr = $('input[type=file]');

			/*遍历file，如果图片id的数字部分和file的id的数字部分相同，那么文件与图片是对应的，删除图片的同时删除对应的file*/

			fileArr.each(function () {

				/*提取file的id的数字部分*/
				var fileId = $(this).attr('id');
				var fileVal = fileId.replace(/[^0-9]/ig, "");
				if (fileVal == picVal) {
					$(this).remove();
					$(obj).parent().parent().remove();
				}
			});


		}


	</script>
</body>

</html>